<template>
    <div id="HomeDetail">
        <div id="HomeDetail-box">
            <div id="box">
                <HomeDetailTop></HomeDetailTop>
                <HomeDetailMiddle></HomeDetailMiddle>
            </div>
            <HomeDetailBar></HomeDetailBar>
        </div>

    </div>
</template>

<script>
    import HomeDetailTop from "com/home/Detail/DetailTop.vue"
    import HomeDetailMiddle from "com/home/Detail/Detail-Middle.vue"
    import HomeDetailBar from "com/home/Detail/Detail-bar.vue"
    export default {
        name: "Home-Detail",
        components:{
            HomeDetailTop,
            HomeDetailMiddle,
            HomeDetailBar
        },
        created(){
            // console.log(this.$route.params.value)
            this.$store.dispatch("HomeDetailxaios",this.$route.params.value);

                //在页面加载时读取localStorage里的状态信息
                if (localStorage.getItem("data")) {
                    //replaceState替换数据 Object.assign合并对象
                    this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(localStorage.getItem("data"))))
                }
                //在页面刷新时将vuex里的信息保存到localStorage里
                window.addEventListener("beforeunload", () => {
                    localStorage.setItem("data", JSON.stringify(this.$store.state))
                })
            }

    }
</script>

<style lang="scss" scoped>
    #HomeDetail{
        padding-top: 0.53rem;
    }
    #HomeDetail-box{
        #box{
            height: 100%;
            background-color: #FFFFFF;
            padding-bottom: 0.48rem ;
            position: relative;
        }
    }
</style>